<template>
    <div style="margin-top: 30px">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="">
                <el-input v-model="formInline.name" placeholder="部门名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryDepTree">查询</el-button>
            </el-form-item>
        </el-form>
        <div id="areaTreeDept">
            <div class="tree-box">
                <div class="zTreeDemoBackground left">
                    <ul id="treeDeptZtree" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery'
    import '@ztree/ztree_v3/js/jquery.ztree.core.min.js'
    import '@ztree/ztree_v3/js/jquery.ztree.excheck.min.js'
    import '@ztree/ztree_v3/css/metroStyle/metroStyle.css'
    import {clearObject, getReq, postReq} from "../../../utils/api";

    export default {
        name: "DeptZtree",
        mounted() {
        },
        data(){
            return{
                formInline: {
                    name: ''
                },
                zNodes:[],
                setting:{
                    view: {
                        showLine: false,
                        selectedMulti: false
                    },
                    check:{
                        enable: false,
                        chkboxType: { 'Y': 'ps', 'N': 'ps' }
                    },
                    data:{
                        simpleData:{
                            enable: true,
                            idKey: "id",
                            pIdKey: "pid",
                            rootPId: 0
                        }
                    },
                    callback:{
                        onClick:this.zTreeOnClick
                    }
                }

            }
        },
        methods:{
            initTree(){
                clearObject(this.formInline)
                postReq('/api/sys_dept/list',this.formInline).then(res=>{
                    this.zNodes = res.data.data
                    $.fn.zTree.init($("#treeDeptZtree"), this.setting, this.zNodes)
                })

            },
            queryDepTree(){
                postReq('/api/sys_dept/list',this.formInline).then(res=>{
                    this.zNodes = res.data.data
                    $.fn.zTree.init($("#treeDeptZtree"), this.setting, this.zNodes)
                })
            },
            onCheck(e,treeId,treeNode){
                let treeObj=$.fn.zTree.getZTreeObj("treeDemo"), nodes=treeObj.getCheckedNodes(true);
                let nodeIds = []
                for(let i=0;i<nodes.length;i++){
                    nodeIds[i]=nodes[i].id
                }
                this.nodeIds = nodeIds
            },
              zTreeOnClick(event, treeId, treeNode) {
                  this.$emit('zTreeClick',{id:treeNode.id,name:treeNode.name})
                 }

        }
    }
</script>

<style scoped>

</style>